<template>
  <div>
    <c-query-toolbar @query="handleQuery" :loading="queryLoading" :params="queryParams" v-show="showQuery"
      :query-button-disabled="disabled">
      <template #toolbar-left>
        <slot name="toolbar-left" />
      </template>
      <template #toolbar-right>
        <slot name="toolbar-right" />
      </template>
      <el-form-item label="访问Token">
        <el-input v-model.trim="queryParams.accessToken" clearable></el-input>
      </el-form-item>
      <el-form-item label="刷新Token">
        <el-input v-model.trim="queryParams.refreshToken" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model.trim="queryParams.userLoginName" clearable></el-input>
      </el-form-item>
    </c-query-toolbar>
    <el-table class="c-mg-t-5p" :data="data" border v-loading="tableLoading">
      <el-table-column prop="userLoginName" width="100" label="用户" sortable="custom"></el-table-column>
      <el-table-column prop="ip" width="100" label="Ip" sortable="custom"></el-table-column>
      <el-table-column prop="accessToken" label="访问Token" sortable="custom" min-width="150"></el-table-column>
      <el-table-column prop="accessExpire" width="140" label="访问过期时间" sortable="custom"></el-table-column>
      <el-table-column prop="refreshToken" label="刷新Token" min-width="150"></el-table-column>
      <el-table-column prop="refreshExpire" width="140" label="刷新过期时间" sortable="custom"></el-table-column>
      <el-table-column prop="createTime" width="130" label="创建时间" sortable="custom">
        <template v-slot="{ row }">
          <span>{{ toShortDatetimeString(row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="状态" align="center" sortable="custom">
        <template v-slot="{ row }">
          <el-tag type="danger" v-if="row.isDisabled">已禁用</el-tag>
          <el-tag type="danger" v-else-if="moment(row.refreshExpire).isBefore()">刷新过期</el-tag>
          <el-tag type="danger" v-else-if="moment(row.accessExpire).isBefore()">访问过期</el-tag>
          <el-tag type="success" v-else>生效中</el-tag>
        </template>
      </el-table-column>
      <slot name="column"></slot>
    </el-table>
    <el-pagination class="c-mg-t-5p" layout="total, sizes, prev, pager, next, jumper" :total="total"
      v-model:current-page="getDataParams.pageIndex" v-model:page-size="getDataParams.pageSize"
      @change="handlePageChange" />
  </div>
</template>
<script setup>
import tokenApi from "@/api/sys/token";
import { ref, useTemplateRef } from "vue";
import { cloneObjectValue, toShortDatetimeString } from "@/utils/common.ts"
import moment from "moment";
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  showQuery: {
    type: Boolean,
    default: true
  },
  inDialog: {
    type: Boolean,
    default: false
  },
  initParams: {
    type: Object
  }
})
const queryParams = ref({
  accessToken: "",
  refreshToken: "",
  userLoginName: ""
})
const total = ref(0)
const queryLoading = ref(false)
const tableLoading = defineModel("tableLoading", {
  type: Boolean,
  default: false
})
const data = ref([])
const getDataParams = ref({ pageIndex: 1, pageSize: 10 });

const expandQuery = defineModel("expand-query", {
  type: Boolean,
  default: true
})

const handleQuery = async (params) => {
  await getData(params);
}
const handlePageChange = async () => {
  await getData();
}

const getData = async (params) => {
  queryLoading.value = true
  tableLoading.value = true
  if (params != null) {
    getDataParams.value = { ...getDataParams.value, ...params };
  }
  const res = await tokenApi.getPageList(getDataParams.value);
  data.value = res.data.list;
  total.value = res.data.total;
  queryLoading.value = false
  tableLoading.value = false
}

const query = async (params) => {
  cloneObjectValue(queryParams.value, params);
  await getData(params);
}

defineExpose({
  getData,
  query
})
</script>